<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            height: 4000px;
        }

        #btn {
            position: fixed;
            right: 0;
            top: 46%;
            width: 50px;
            height: 50px;
            background-color: pink;
            border: none;
            cursor: pointer;
            outline: none;
            display: none;
        }
    </style>
</head>

<body>
    <button id="btn">顶部</button>
</body>
<script>
    // if (document.documentElement.scrollHeight) {
    //     document.documentElement.scrollHeight
    // } else {
    //     document.body.scrollHeight    
    // }
    var btn = document.getElementById('btn')
    //这个window的事件表示的是，每次滚动 滚动条，就让这个函数执行一次
    window.onscroll = function () {
        // 获取html的总高度，如果html的高度为0，那么就用body的高度      这个是短路表达式
        // ||  表示如果前面的为真，那就用它，如果为假。就判断后面的数据是否为真，为真就用后面的
        //  &&   也是短路表达式，就是如果前面的条件为真，那么就用&&后面的表达式（数据）
        var gaoTotal = document.documentElement.scrollHeight || document.body.scrollHeight
        // 这个是获取滚动条的高度，也是短路表达式
        var gao = document.documentElement.scrollTop || document.body.scrollTop
        console.log(gao)
        //如果高度大于1000，那么就显示按钮。否则隐藏按钮
        gao >= 1000 ? btn.style.display = "block" : btn.style.display = "none"

        //鼠标点击的时候，让滚顶条to（回到）top为0的地方
        btn.onclick = function () {
            window.scrollTo({ top: 0 })
        }
    }
</script>

</html>